{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto; /* 仅表格区域横向滚动 */
        margin: 10px 0;
    }
    .dataTable {
        min-width: 1200px; /* 确保表格基础宽度 */
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        white-space: nowrap; /* 内容不换行 */
        text-align: center;
    }
    .sortable {
        cursor: pointer;
        position: relative;
    }
    
    /* 筛选工具栏样式 - 固定不动 */
    .filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap; /* 防止工具按钮换行 */
    }

    .input-group.input-sm .form-control {
        height: 30px; /* 统一输入框高度 */
        border-radius: 3px 0 0 3px; /* 左侧圆角 */
    }

    .input-group.input-sm .btn {
        height: 30px; /* 统一按钮高度与输入框一致 */
        border-radius: 0 3px 3px 0; /* 右侧圆角 */
        padding: 0 12px; /* 调整按钮内边距 */
    }
    
    /* 列宽调整 */
    .col-id { width: 5%; }
    .col-username { width: 8%; }
    .col-email { width: 12%; }
    .col-fullname { width: 8%; }
    .col-gender { width: 5%; }
    .col-birth { width: 8%; }
    .col-height { width: 6%; }
    .col-weight { width: 6%; }
    .col-time { width: 12%; }
    .col-disease { width: 7%; }
    .col-other { width: 10%; }
    .col-operate { width: 9%; }
</style>

<script>
    // 全选/取消全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selallCheckbox = document.getElementById('selall');
        const rowCheckboxes = document.querySelectorAll('input[name="ids"]');
        
        selallCheckbox.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = selallCheckbox.checked;
                if (checkbox.checked) {
                    checkbox.parentElement.classList.add('checked');
                } else {
                    checkbox.parentElement.classList.remove('checked');
                }
            });
        });
        
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelallStatus);
        });
        
        function updateSelallStatus() {
            const allChecked = Array.from(rowCheckboxes).every(checkbox => checkbox.checked);
            selallCheckbox.checked = allChecked;
            if (allChecked) {
                selallCheckbox.parentElement.classList.add('checked');
            } else {
                selallCheckbox.parentElement.classList.remove('checked');
            }
        }
    });

    function doDel(url) {
        if (confirm("确定要删除这条数据吗？")) {
            window.location.href = url;
        }
    }
</script>

<!-- 内容头部 -->
<section class="content-header">
    <h1>
        账号管理
        <small>用户数据列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">账号管理</a></li>
        <li class="active">用户数据列表</li>
    </ol>
</section>
<!-- 内容头部 /-->

<!-- 正文区域 -->
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">用户数据列表</h3>
        </div>
        <div class="box-body">
            <!-- 筛选工具栏 - 固定不动（与第二个文件结构一致） -->
            <div class="filter-group">
                <form action="{% url 'myadmin_users_index' 1 %}" method="get" class="form-inline">
                    <!-- 添加用户按钮 -->
                    <div class="form-group">
                        <button type="button" class="btn btn-default" title="添加用户">
                            <a href="{% url 'myadmin_users_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加用户</a>
                        </button>
                    </div>

                    <!-- 搜索框 - 放在添加按钮旁边 -->
                    <div class="input-group input-sm" style="width: 200px;">
                        <input type="text" name="keyword" class="form-control" placeholder="搜索名称/邮箱" 
                               value="{{ request.GET.keyword|default:'' }}">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </div>

            <!-- 表格容器 - 仅此处横向滚动 -->
            <div class="table-box">
                <!-- 数据列表 -->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center; white-space: nowrap;">
                                <div style="display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue" style="width: 16px; height: 16px;">
                                    <span style="font-size: 14px; line-height: 16px;">全选</span>
                                </div>
                            </th>
                            <th class="sortable col-id" style="text-align: center;">
                                <a href="?sort=user_id&order={% if request.GET.sort == 'user_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=user_id'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    ID{% if request.GET.sort == 'user_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-username">
                                <a href="?sort=username&order={% if request.GET.sort == 'username' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET.urlencode|cut:'&sort=username'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    用户名称{% if request.GET.sort == 'username' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-status">当前状态</th>
                            <th class="sortable col-email">
                                <a href="?sort=email&order={% if request.GET.sort == 'email' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET.urlencode|cut:'&sort=email'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    邮箱{% if request.GET.sort == 'email' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-phone">联系方式</th>
                            <th class="col-fullname">全名</th>
                            <th class="col-gender">性别</th>
                            <th class="col-birth">生日</th>
                            <th class="col-height">身高(cm)</th>
                            <th class="col-weight">体重(kg)</th>
                            <th class="sortable col-time">
                                <a href="?sort=created_at&order={% if request.GET.sort == 'created_at' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET.urlencode|cut:'&sort=created_at'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    注册时间{% if request.GET.sort == 'created_at' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-time">
                                <a href="?sort=updated_at&order={% if request.GET.sort == 'updated_at' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET.urlencode|cut:'&sort=updated_at'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    最后更新时间{% if request.GET.sort == 'updated_at' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-disease">自身免疫性疾病</th>
                            <th class="col-disease">高血压</th>
                            <th class="col-disease">糖尿病</th>
                            <th class="col-disease">糖尿病类型</th>
                            <th class="col-disease">高血脂</th>
                            <th class="col-other">其他慢性病</th>
                            <th class="col-operate">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in userslist %}
                        <tr>
                            <td><input name="ids" type="checkbox"></td>
                            <td>{{ vo.user_id }}</td>
                            <td title="{{ vo.username }}">{{ vo.username }}</td>
                            <td>
                                {% if vo.status == 1 %}
                                    <span style="color:green">正常</span>
                                {% elif vo.status == 2 %}
                                    <span style="color:red">禁用</span>
                                {% elif vo.status == 6 %}
                                    <span style="color:blue">管理员</span>
                                {% elif vo.status == 9 %}
                                    <span style="color:orangered">删除</span>
                                {% else %}
                                    <span style="color:orange">未知状态</span>
                                {% endif %}
                            </td>
                            <td title="{{ vo.email }}">{{ vo.email }}</td>
                            <td title="{{vo.phone}}">{{vo.phone}}</td>
                            <td title="{{ vo.full_name|default:'无' }}">{{ vo.full_name|default:'无' }}</td>
                            <td>{{ vo.get_gender_display }}</td>
                            <td title="{{ vo.birth_date|default:'无' }}">{{ vo.birth_date|default:'无' }}</td>
                            <td>{{ vo.height_cm|default:'无' }}</td>
                            <td>{{ vo.weight_kg|default:'无' }}</td>
                            <td>{{ vo.created_at|date:'Y-m-d H:i:s' }}</td>
                            <td>{{ vo.updated_at|date:'Y-m-d H:i:s' }}</td>
                            <td>{% if vo.has_autoimmune_disease %}是{% else %}否{% endif %}</td>
                            <td>{% if vo.has_hypertension %}是{% else %}否{% endif %}</td>
                            <td>{% if vo.has_diabetes %}是{% else %}否{% endif %}</td>
                            <td>
                                {% if vo.has_diabetes %}
                                    {{ vo.get_diabetes_type_display }}
                                {% else %}
                                    无
                                {% endif %}
                            </td>
                            <td>{% if vo.has_hyperlipidemia %}是{% else %}否{% endif %}</td>
                            <td>
                                {% if vo.other_chronic_conditions %}
                                    {{ vo.other_chronic_conditions }}
                                {% else %}
                                    无
                                {% endif %}
                            </td>
                            <td>
                                <a type="button" href="{% url 'myadmin_users_edit' vo.user_id %}" class="btn bg-primary btn-xs">
                                    <i class="fa fa-pencil"></i> 编辑
                                </a>
                                <a type="button" onclick="doDel('{% url 'myadmin_users_delete' vo.user_id %}', this)" class="btn bg-danger btn-xs">
                                    <i class="fa fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- 数据列表/ -->
            </div>
            <!-- 分页控件 - 固定不动 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_users_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist%}
                        <li {% if p == pIndex %}class="active"{% endif %}><a href="{% url 'myadmin_users_index' p %}?{{ request.GET.urlencode }}">{{p}}</a></li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_users_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 正文区域 /-->
</div>

{% endblock %}